<template>
	<div class="container">
		<router-link to='/search' class="search">
			<span class="icon-search"></span>
			<span class="text">搜索</span>
		</router-link>
		<ul class="big-list">
			<li  v-for='(item, index) in data' >
				<div class="header">
					<span class="text">{{item.name}} </span>
					<em class="line"></em>
				</div>
				<div class="body">
					<router-link class="item" :to="'/goodsClassify/' + subItem.gc_id" v-for="subItem in item.data" :key="subItem.gc_id">
						<img class="icon-image" :src="subItem.gc_img" />
						<span class="text">{{subItem.gc_name}}</span>
					</router-link>
				</div>

			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'classify',
		props: {
			data: {
				type: Array,
				require: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.search {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 40px;
			height: 88px;
			margin-bottom: 60px;
			background-color: #f8f8f8;
			border-radius: 8px;
			.icon-search {
				width: 34px;
				height: 34px;
				margin-right: 10px;
			}
			.text {
				font-size: 30px;
				color: #9B9B9B;
			}
		}
		.big-list {
			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 35px;
				.text {
					padding-right: 30px;
					flex-shrink: 0;
					font-size: 40px;
					color: #4A4A4A;
				}
				.line {
					height: 2px;
					width: 100%;
					background-color: #e5e5e4;
				}
			}
			.body {
				display: flex;
				flex-wrap: wrap;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 50px;
					width: 25%;
					.icon-image {
						width:100px; 
						height:100px;
					}
					.text {
						font-size:28px; 
						color:#4a4a4a;
					}
				}
			}
		}
	}
</style>